<template>
  <div class="cardArea">
    <!-- 标题 -->
    <div class="cardArea_title">
      <div class="cardArea_title_label"></div>
      <div class="cardArea_title_content">运行流程图</div>
    </div>
    <!-- 流程图 -->
    <div class="cardArea_img">
      <img v-if="historyImg" :src="historyImg" :data-original="historyImg" />
    </div>
    <!-- 标题 -->
    <div class="cardArea_title">
      <div class="cardArea_title_label"></div>
      <div class="cardArea_title_content">编辑流程图</div>
    </div>
    <!-- 流程图 -->
    <div class="cardArea_img">
      <img v-if="currentImg" :src="currentImg" :data-original="currentImg" />
    </div>
    <div class="buttonBox">
      <a-button :style="{ marginRight: '30px' }" icon="rollback" @click="handleBack"> 返回引导页 </a-button>
    </div>
  </div>
</template>

<script>
import { BASE_URL } from '@/utils/request.js'
export default {
  data() {
    return {
      currentImg: '', // 现在的流程图片
      historyImg: '', //历史的流程图片
      base_url: BASE_URL
    }
  },
  created() {
    console.log('参数', this.$route.params)
    this.currentImg = this.base_url + '/flow/viewCharUnpublishedDiagram?modelKey=' + this.$route.params.modelKey
    this.historyImg = this.base_url + '/act_dsn_form_define/viewFormDefineChart?formid=' + this.$route.params.formid
  },
  methods: {
    // 返回
    handleBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.cardArea {
  background-color: #ffffff;
  padding: 28px;
  min-height: 745px;
}

.cardArea_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.cardArea_title_label {
  width: 3px;
  height: 17px;
  background-color: #5b79fb;
}

.cardArea_title_content {
  margin-left: 0.5%;
  font-size: 19px;
  font-family: Source Han Sans CN;
  font-weight: 550;
  color: #232323;
  letter-spacing: 2px;
}

.cardArea_img {
  border: 1px solid #eee;
  margin-top: 20px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}

.buttonBox {
  text-align: center;
  margin-top: 30px;
}
</style>
